var dzColorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.dzcolor');
var pantoneMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
var yarnMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.yarn');
var customerMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
var fMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');

var customerXmlLoader = new i18nMessage('../../servlet/BiFranceCustomerServlet?action=5');
var ctYarnMaterialXml = new i18nMessage('../../servlet/CodeTableServlet?name=CtYarnMaterial');
var ctDyeingXmlLoader = new i18nMessage('../../servlet/CodeTableServlet?name=CtDyeing');
var ctFilsTypeXmlLoader = new i18nMessage('../../servlet/CodeTableServlet?name=CtFilsType');
var ctColorFamilyXmlLoader = new i18nMessage('../../servlet/CodeTableServlet?name=CtColorFamily');
var ctColorTypeXmlLoader = new i18nMessage('../../servlet/CodeTableServlet?name=CtColorType');
var ctSeasonNumberArrayLoader = new i18nMessage('../../servlet/CodeTableServlet?name=CtSeasonNumber');
var ctSendByXmlLoader = new i18nMessage('../../servlet/CodeTableServlet?name=CtSendBy');
var Loader = new i18nMessage('../../servlet/CodeTableServlet?name=CtYesno');
var dzColorStore;
var dzColorGrid;
var dzColorWindow;
var dzColorUrl;
function locateDZColor(rowIndex){
	selectedDZColor = dzColorStore.getAt(rowIndex).data;
}
var selectDZColor = function(selectDZColorCallback, ctYarnMaterial, ctColorFamily, ctFilsType, ctSeasonNumber, yarnId, customerId){
    if (ctYarnMaterial && ctColorFamily && ctFilsType) {
        dzColorUrl = '../../servlet/BiDZColorServlet?action=20&ctYarnMaterial=' + ctYarnMaterial + '&ctColorFamily=' + ctColorFamily + '&ctFilsType=' + ctFilsType;
    }else if(ctSeasonNumber && yarnId){
    	dzColorUrl = '../../servlet/BiDZColorServlet?action=20&ctSeasonNumber=' + ctSeasonNumber + '&yarnId=' + yarnId;
    }else {
        dzColorUrl = '../../servlet/BiDZColorServlet?action=4';
    }
    if(customerId){
    	dzColorUrl += '&customerId=' + customerId;
    }
    if (!dzColorWindow) {
        dzColorWindow = new Ext.Window({
            title: message.get('message.combo.pleaseselect'),
            layout: 'fit',
            width: 990,
            height: 625,
            closeAction: 'hide',
            plain: true,
            modal: true,
            items: [{
                id: 'dzColorPanel',
                region: 'center',
                bodyStyle: {
                    background: '#ffffff',
                    padding: '7px'
                },
                html: '<div id="dzColorDiv"></div>'
            }]
        });
    }
    dzColorWindow.show();
    
    if (dzColorGrid) {
		dzColorStore.proxy = new Ext.data.HttpProxy({
				url : dzColorUrl
			});
        dzColorStore.reload();
        return;
    }
    dzColorStore = new Ext.data.Store({
        url: dzColorUrl,
        
        reader: new Ext.data.XmlReader({
            record: 'item',
            id: 'id',
            totalRecords: 'itemTotal'
        }, [ 
                    'id', 'index', 'dzColorCode', 'pantoneNumber','realColor', 'factoryNameCN','factoryNameEN','supplierNumber',
                    'yarnReference','ctYarnMeasure', 'yarnAccount', 'customerColorCode', 'pantoneNumber', 'realColor',
                    {name: 'biYarn.reference', mapping: 'yarnReference'},
					{name: 'biYarn.ctYarnMaterial1', mapping: 'ctYarnMaterial1'},
					{name: 'biYarn.ctYarnMaterial2', mapping: 'ctYarnMaterial2'},
					{name: 'biYarn.ctYarnMaterial3', mapping: 'ctYarnMaterial3'},
					{name: 'biYarn.ctYarnMaterial4', mapping: 'ctYarnMaterial4'},
					{name: 'biYarn.ctYarnMaterial5', mapping: 'ctYarnMaterial5'},
					{name: 'biFranceCustomer.name', mapping: 'customerName'}, 
					{name: 'biFranceCustomer.department', mapping: 'customerDepartment'}, 
					'supplierNumber','isApprovied1', 'isApprovied2', 'ctSeasonNumber', 'photo1Name', 'photo2Name','photo3Name', 'comment','isApproved']),
        
        remoteSort: true
    });
    
    dzColorStore.setDefaultSort('id', 'desc');
    
    function renderSelectItem(value, p, record,rowIndex){
        return String.format('<a href="javascript:locateDZColor({21}); selectDZColorCallback(\'{0}\', \'{1}\', \'{2}\', \'{3}\', \'{4}\', \'{5}\', \'{6}\', \'{7}\', \'{8}\', \'{9}\', \'{10}\', \'{11}\', \'{12}\', \'{13}\', \'{14}\', \'{15}\', \'{16}\', \'{17}\', \'{18}\', \'{19}\', \'{20}\', \'{21}\');dzColorWindow.hide();"><img src="../../images/icons/arrow_rotate_clockwise.png" title="' + message.get('message.list.select') + '" /></a>',
        	record.data.id, 
        	record.data.dzColorCode,
        	record.data['biFranceCustomer.name'], 
        	record.data['biFranceCustomer.department'],
        	record.data['biYarn.reference'],
        	record.data.ctYarnMeasure,
        	record.data.yarnAccount,
        	record.data.supplierNumber,
        	record.data.customerColorCode,
        	record.data.pantoneNumber,
        	record.data.realColor,
        	record.data['biYarn.ctYarnMaterial1'],
        	record.data['biYarn.ctYarnMaterial2'],
        	record.data['biYarn.ctYarnMaterial3'],
        	record.data['biYarn.ctYarnMaterial4'],
        	record.data['biYarn.ctYarnMaterial5'],
        	record.data.factoryName,
        	record.data.photo1Name,
        	record.data.photo2Name,
        	record.data.photo3Name,
        	record.data.isApproved,
        	rowIndex);
    }
    
    var dzColorFilters = new Ext.grid.GridFilters({
        filters: [{
            type: 'string',
            dataIndex: 'dzColorCode'
        }, {
            type: 'string',
            dataIndex: 'biFranceCustomer.name'
        }, {
            type: 'string',
            dataIndex: 'biFranceCustomer.department'
        }, {
            type: 'string',
            dataIndex: 'biYarn.reference'
        }, {
            type: 'string',
            dataIndex: 'customerColorCode'
        }, {
            type: 'list',
            dataIndex: 'isApprovied1',
            options: Loader.getCtArray()
        }, {
            type: 'list',
            dataIndex: 'isApprovied2',
            options: Loader.getCtArray()
        }, {
            type: 'list',
            dataIndex: 'biYarn.ctYarnMaterial1',
            options: ctYarnMaterialXml.getCtArray()
        }, {
            type: 'list',
            dataIndex: 'biYarn.ctYarnMaterial2',
            options: ctYarnMaterialXml.getCtArray()
        }, {
            type: 'list',
            dataIndex: 'biYarn.ctYarnMaterial3',
            options: ctYarnMaterialXml.getCtArray()
        }, {
            type: 'list',
            dataIndex: 'biYarn.ctYarnMaterial4',
            options: ctYarnMaterialXml.getCtArray()
        }, {
            type: 'list',
            dataIndex: 'biYarn.ctYarnMaterial5',
            options: ctYarnMaterialXml.getCtArray()
        },{
        	type : 'list',
        	dataIndex: 'ctSeasonNumber',
        	options: ctSeasonNumberArrayLoader.getCtArray()
        }]
    });
	
	var dzColorExpander = new Ext.grid.RowExpander({
			         tpl : new Ext.XTemplate(
						'<p><b>' + pantoneMessage.get('ui.pantonecolor.number') + ':</b>&nbsp;&nbsp; {pantoneNumber}&nbsp;&nbsp;&nbsp;&nbsp;<table width="60" style="background: #{realColor};position: absolute;"><tr height="15"><td>&nbsp;</td></tr></table></p>',
						'<br/><p><b>' + dzColorMessage.get('ui.dzcolor.factorycolorcode') + ':</b>&nbsp;&nbsp; {supplierNumber}&nbsp;&nbsp;&nbsp;&nbsp;<b>' + fMessage.get('ui.factory.name') + ':</b>&nbsp;&nbsp; {factoryNameCN}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{factoryNameEN}</p>',
						'<br/><p><img src="../../_temp/{photo1Name}" width="150px"/> &nbsp;&nbsp;&nbsp;&nbsp;',
						'<img src="../../_temp/{photo2Name}" width="150px"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="../../_temp/{photo3Name}" width="150px"/></p><br/>',
						'<br/><br/><p><b>' + message.get('message.edit.comment') + ':</b> {comment}</p><br/>'
			        )
			    });
				
    // create the grid
    dzColorGrid = new Ext.grid.GridPanel({
        title: dzColorMessage.get('ui.dzcolor.listtitle'),
        store: dzColorStore,
        stripeRows: true,
        plugins: [dzColorFilters, dzColorExpander],
        height: 580,
        columns: [dzColorExpander, {
            header: message.get('message.list.id'),
            width: 20,
            dataIndex: 'index',
            sortable: false
        }, {
            header: dzColorMessage.get('ui.dzcolor.code'),
            width: 80,
            dataIndex: 'dzColorCode',
            sortable: true
        }, {
            header: yarnMessage.get('ui.yarn.yarnaccount'),
            width: 80,
            dataIndex: 'biYarn.reference',
            sortable: true
        }, {
            header: yarnMessage.get('ui.yarn.material') + '1',
            dataIndex: 'biYarn.ctYarnMaterial1',
            sortable: true
        }, {
            header: yarnMessage.get('ui.yarn.material') + '2',
            dataIndex: 'biYarn.ctYarnMaterial2',
            sortable: true
        }, {
            header: yarnMessage.get('ui.yarn.material') + '3',
            dataIndex: 'biYarn.ctYarnMaterial3',
            sortable: true
        }, {
            header: yarnMessage.get('ui.yarn.material') + '4',
            dataIndex: 'biYarn.ctYarnMaterial4',
            sortable: true
        }, {
            header: yarnMessage.get('ui.yarn.material') + '5',
            dataIndex: 'biYarn.ctYarnMaterial5',
            sortable: true
        }, {
            header: customerMessage.get('ui.francecustomer.name'),
            dataIndex: 'biFranceCustomer.name',
            sortable: true
        }, {
            header: customerMessage.get('ui.francecustomer.department'),
            dataIndex: 'biFranceCustomer.department',
            sortable: true
        }, {
            header: dzColorMessage.get('ui.dzcolor.customercolorcode'),
            dataIndex: 'customerColorCode',
            sortable: true
        }, {
            header: dzColorMessage.get('ui.dzcolor.isapproved'),
            dataIndex: 'isApproved',
            sortable: true,
            renderer: renderYesno
        }, {
            header: dzColorMessage.get('ui.dzcolor.seasonnumber'),
            dataIndex: 'ctSeasonNumber',
            sortable: true
        },{
            header: message.get('message.list.select'),
            width: 30,
            dataIndex: 'id',
            sortable: false,
            renderer: renderSelectItem
        }],
        viewConfig: {
            forceFit: true
        },
        loadMask: true,
        renderTo: 'dzColorDiv',
        bbar: new Ext.PagingToolbar({
            pageSize: 20,
            store: dzColorStore,
            displayInfo: true
        })
    });
        
    dzColorStore.load({
        params: {
            start: 0,
            limit: 20
        }
    });
	
	function renderYesno(value, p, record){
					if(value == '02')
						return String.format('<img ext:qtip="{0}" src="../../images/icons/cross.png" />', record.data.comment3);
					else if(value == '01')
						return String.format('<img ext:qtip="{0}" src="../../images/icons/tick.png"/>', record.data.comment3);
					else
						return '';
                }
}


